
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>世界人文</title>
    <!-- Bootstrap core CSS -->
    <link rel="icon" href="static/img/favicon.ico">
    <link rel="stylesheet" href="static/css/baguetteBox.min.css">
    <link rel="stylesheet" href="static/css/gallery-clean.css">
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.15/dist/css/bootstrap.min.css" rel="stylesheet">
   <!--image show  -->
    <link rel="stylesheet" href="static/css/style.css">


  </head>

  <body style='min-height: auto;background-image: url(static/img/bg-main.jpg); background-repeat:repeat; ' >
   
    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="javascript:void(0)" >世界人文</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" >
          <ul class="nav navbar-nav" >
            <li><a href="javascript:void(0)" onclick='window.location.reload()'>首页</a></li>
            <li><a href="javascript:void(0)" id='search' style="color:red;font-size:1.5em;font-weight:bold;">搜索</a></li>
            <li><a href="javascript:void(0)" id='about'>关于</a></li>
            <li><a href="javascript:void(0)" id='gx_top'>搜集狂人</a></li>
          <!--   <li><a href="#" id='contactus'>联系我</a></li> -->
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ ctx.user_info.username }}<span class="caret"></span></a>
              <ul class="dropdown-menu">
              {% for menu in ctx.menu_list%}

                 {% if menu.gnmc =='登录' or menu.gnmc =='退出'  %}
                    <li><a href="/{{ menu.gn_dm }}" >{{ menu.gnmc }}</a></li>
                 {% else %}
  
                  <li><a href="javascript:void(0)" id='{{ menu.gn_dm }}'>{{ menu.gnmc }}</a></li>
                 {% endif %}
              {% endfor %}

              </ul>
            </li> 
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container theme-showcase" role="main" style="margin-top:100px">

        <div id="legend" class="">
           <legend class="">推荐</legend>
        </div>

                <!--手风琴效果-->
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                  {% for panel in [{'fl':'人物','class':'primary','fl_dm':'img10'},{'fl':'建筑','class':'info','fl_dm':'img20'},{'fl':'艺术','class':'danger','fl_dm':'img30'}] %}
                  <div class="panel panel-{{ panel.class }}">
                    <div class="panel-heading" role="tab" id="heading{{panel.fl_dm}}">
                      <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{panel.fl_dm}}" aria-expanded="false" aria-controls="collapse{{panel.fl_dm}}">
                          {{ panel.fl }}
                        </a>
                      </h4>
                    </div>
                    <div id="collapse{{panel.fl_dm}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{panel.fl_dm}}">
                      <div class="panel-body">

                        <div class="tz-gallery">
                             <div class="row">

                             {% for img in ctx.get(panel.fl_dm) %}
                             {% if loop.index%2 == 0 %}
                               <div class="col-sm-6 col-md-4">
                             {% else %}
                               <div class="col-sm-6 col-md-4">
                             {% endif %}
                                  <div class="thumbnail">
                                      <a class="lightbox" href="static/images/{{ img.uuid }}.jpg">
                                          <img src="static/sm_img/{{ img.uuid }}.jpg" alt="Park">
                                      </a>
                                      <div class="caption">
                                          <h3>{{ img.need_name }}</h3>
                                          <p>{{ img.intro }}</p>
                                      </div>
                                  </div>
                              </div>
                              {% endfor %}
                            </div> 
                        </div> 
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>


    </div>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>')</script>

     <script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/baguetteBox.min.js"></script>

    <!-- image show -->
    <script type="text/javascript">

     
      $(function(){
         baguetteBox.run('.tz-gallery');
    //路由
          $('.nav.navbar-nav li a').click(function(){
              url = '/'+$(this).attr('id')
              if(url != '/undefined'){
                  $.ajax({
                            //请求方式
                            type : "get",
                            //数据类型
                            dataType: 'html',
                            //请求地址
                            url : url,
                            //请求成功
                            success : function(rs) {
                              
                               $('.container.theme-showcase').empty()
                               $('.container.theme-showcase').append(rs)
                              
                            },
                            //请求失败，包含具体的错误信息
                            error : function(e){
                                alert(e)
                            }
                        });
                }
          })

      })
    </script>
  </body>
</html>
